<template>
    <div class="menu-select">
        <slot name="target">
            <i class="fif fif-template" :id="id" :class="wrapper" style="font-size: 24px;cursor: pointer"></i>
        </slot>
        <div :class="content" class="hidden clearfix">
            <ul class="menu-list">
                <menu-item :key="category + index" v-for="(category, index) in categories" :category="category"></menu-item>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
                <li style="visibility: hidden;"><a href="#">&nbsp;</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    // import category from '@/config/TemplateCategory'
    import MenuItem from '@/components/widgets/MenuItem'
    import '@/static/js/plugins/fg.menu/fg.menu.js'
    import '@/static/js/plugins/fg.menu/fg.menu.css'

    export default {
        name: "SelectMenu",
        props: {
            id: {
                type: String,
                default: 'menuSelection'
            },
            wrapper: {
                type: String,
                default: 'ctl-menu-template'
            },
            content: {
                type: String,
                default: 'ctl-menu-template'
            },
            init: {
                type: Boolean,
                default: false,
            },
            categories: {
                type: Array,
                default: () => []
            }
        },
        components: {MenuItem},
        created() {},
        mounted() {},
        methods: {
            initMenu() {
                $(`.${this.wrapper}`).menu({
                    maxHeight: 350,
                    content: $(`.${this.content}`).html(),
                    backLink: false,
                    onChoose: (val) => {
                        this.$emit('input', val)
                    },
                    positionOpts: {
                        posX: 'left',
                        posY: 'top',
                        offsetX: 0,
                        offsetY: 20,
                        directionH: 'right',
                        directionV: 'down',
                        detectH: true, // do horizontal collision detection
                        detectV: true, // do vertical collision detection
                        linkToFront: false
                    },
                });
            }
        },
        watch: {
            init() {},
            categories() {
                if (this.categories.length) {
                    this.$nextTick(() => {
                        this.initMenu()
                    })
                }

            }
        }
    }
</script>

<style lang="stylus">
    .ui-widget-content
        border: 1px solid #aaaaaa;
        background: #fff;
        color: #222222;
        z-index : 10000
    .ui-widget-header
        overflow :hidden;
        font-size: 12px;
        border: 1px solid #eee;
        background: #2cabe3;
        color: #fff !important;
        font-weight: bold;
        border-radius :4px;
</style>